<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="" prop="query">
                    <el-input style="width: 250px;" v-model="queryParams.query" placeholder="客户id/客户名称/联系方式" clearable />
                </el-form-item>
                <el-form-item label="跟进状态：" prop="progress">
                    <el-select v-model="queryParams.progress" filterable placeholder="请选择" clearable
                        style="width: 200px">
                        <el-option v-for="dict in progresList" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item  label="创建时间：" prop="date">
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="客户负责人：" prop="responsiblePersonId">
                    <el-select v-model="queryParams.responsiblePersonId" placeholder="请选择" clearable style="width: 190px">
                        <el-option v-for="dict in responsiblePersonIdList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <div class="main_top">
                <div class="lef">
                    <el-button type="primary" @click="createReportForm">创建报备单</el-button>
                    <el-button type="primary" @click="customerFollowUp">客户跟进</el-button>
                </div>
                <div class="listBox_head">
                    <export-excel-button title="客户报备单列表" action="/client/filing/list/export" :params="ExportParams" />
                </div>
            </div>
            <el-table ref="table" v-loading="loading" :data="tabList" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="客户id" align="center" prop="id" :show-overflow-tooltip="true" width="220" />
                <el-table-column label="客户名称" align="center" prop="clientName" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="客户类型" align="center" prop="clientType" :show-overflow-tooltip="true" width="170"/>
                <el-table-column label="客户级别" align="center" prop="clientLevel" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="{}" slot="header">
                        <span>客户级别</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                        <i class="el-icon-question tip_icon"></i>
                        <div slot="content" class="p_class">
                            <p>S 门店数大于等于100家/线上月度销售额大于等于250万元</p>
                            <p>A 门店数大于等于20家/线上月度销售额小于250万，大于等于70万元</p>
                            <p>B 门店数小于等于10家/线上月度销售额小于70万元，大于等于10万</p>
                            <p>C 门店数小于等于3家/线上月度销售额小于10万元，大于等于3万</p>
                            <!-- <p>渠道运营商</p> -->
                        </div>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <p>{{scope.row.clientLevel}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="客户诉求" align="center" prop="appeal" :show-overflow-tooltip="true" min-width="200" />
                <el-table-column label="其他诉求" align="center" prop="otherAppeal" :show-overflow-tooltip="true" width="200"/>
                <el-table-column label="客户负责人" align="center" prop="responsiblePerson" :show-overflow-tooltip="true" width="120"/>
                <el-table-column label="来客账号" align="center" prop="tiktokVisitorAccount" :show-overflow-tooltip="true" width="170" />
                <el-table-column label="进展" align="center" prop="progress" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="上次跟进时间" align="center" prop="followTime" :show-overflow-tooltip="true"  width="170"/>
                <el-table-column label="未跟进天数" align="center" prop="notFollowTime" :show-overflow-tooltip="true" width="100"/>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"  width="170"/>
                <el-table-column label="操作" align="center" width="180" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleView(scope.row)" v-if="scope.row.progress != '已签约'">查看</el-button>
                    <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="scope.row.progress != '已签约'">编辑</el-button>
                    <el-button size="mini" type="text" @click="handleRecords(scope.row)">跟进记录</el-button>
                </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
        <AddDialog  v-if="isDialog" :id="id"  :pathType="pathType" :visible.sync="isDialog" @success="_handleSuccess" />
        <LookDialog  v-if="isDialogLook" :id="id" :visible.sync="isDialogLook"  />
        <RecordsDialog  v-if="isDialogRecords" :id="id" :visible.sync="isDialogRecords" />
    </div>
</template>
<script>
import {
    clientFilingList,
    responsibleSelect,
    userInfo
} from "@/api/customer/reportingForm";
import { getToken } from '@/utils/auth'
import ExportExcelButton from "@/components/ExportExcelButton/index";
import AddDialog from "./components/addDialog";
import LookDialog from "./components/lookDialog";
import RecordsDialog from "./components/recordsDialog";

export default {
    name: "summaryOfDetails",
    components: {
        ExportExcelButton,
        AddDialog,
        LookDialog,
        RecordsDialog
    },
    data() {
        return {
            loading: false,
            isDialog:false,//新增编辑显示弹窗状态
            isDialogLook:false,//查看显示弹窗状态
            isDialogRecords:false,//跟进记录显示弹窗状态
            total: 0,//状态字典数组
            progresList: [],//跟进状态
            responsiblePersonIdList: [],//客户负责人
            id:'',//id
            //表格数据
            tabList: [],
            date: [],
            timeSatus: 1, //选择结算时间、交易时间、核销时间
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                query: '', //客户id/客户名称/联系方式
                progress: '', //跟进状态
                responsiblePersonId: '', //客户负责人
                dateStart:'',//提交开始时间
                dateEnd:'',//提交结束时间
            },
            isResponsible:1,//是否负责人 1 否 2 是
        }
    },
    computed: {
        ExportParams() {
            const params = {
                ...this.queryParams,
            };
            return params;
        },
    },
    created() {
        this.getStatusList() //根据字典获取数据
        // this.getUserInfo() //获取用户信息
        this.getResponsiblePersonIdList() //客户负责人下拉
        this.getList() //获取数据列表
    },
    methods: {

        handleTime(){
            this.queryParams.dateStart = this.date[0]
            this.queryParams.dateEnd = this.date[1]
        },
        // 创建报备单
        createReportForm(){
            this.pathType = 'add'
            this.isDialog = true
        },
        // 客户跟进
        async customerFollowUp() {
            try {
                var res = await userInfo()
                let result = res.result
                this.isResponsible = result.isResponsible
                //是否负责人 1 否 2 是
                if (this.isResponsible == 2) {
                    console.log('process.env.VUE_APP_CUSTOM_URL', process.env.VUE_APP_CUSTOM_URL)
                    // let url = 'http://192.168.0.118:8086/sysh5/#/pages/customerFollowUp/customerFollowUp?token=' + getToken()
                    let url = process.env.VUE_APP_CUSTOM_URL + '/sysh5/#/pages/customerFollowUp/customerFollowUp?token=' + getToken()
                    window.open(url, '_blank');
                    // window.onload = 
                } else {
                    this.$message.error('暂无权限')
                }
            } catch (error) {

            }
        },
        // 查看
        handleView(item){
            this.id = item.id
            this.isDialogLook = true
        },
        // 编辑
        handleEdit(item){
            this.pathType = 'edit'
            this.id = item.id
            this.isDialog = true
        },
        // 跟进记录 跳转h5 页面
        handleRecords(item){
            this.id = item.id
            this.isDialogRecords = true
        },
        // 创建成功
        _handleSuccess() {
          this.resetQuery();
        },
        // 选择结算时间、交易时间、核销时间事件
        handCommand(command) {
            this.timeSatus = command
        },
        // 获取活动状态字典
        getStatusList() {
            var dictType = "bee_client_follow_progress";
            this.$getSelectList(dictType)
                .then((res) => {
                    var arr = [{ id: "",value: "全部"}];
                    this.progresList = arr.concat(res.result[0].dictList)
                })
                .finally(() => { });
        },
        // 客户负责人下拉
        getResponsiblePersonIdList(){
            responsibleSelect().then((res) => {
                var arr = [{ id: "",value: "全部"}];
                this.responsiblePersonIdList = arr.concat(res.result)
                // this.responsiblePersonIdList = res.result
            })
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let data = JSON.parse(JSON.stringify(this.queryParams));  //深拷贝
            clientFilingList(data).then((response) => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            //创建确定
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                query: '', //客户id/客户名称/联系方式
                progress: '', //跟进状态
                responsiblePersonId: '', //客户负责人
                dateStart:'',//提交开始时间
                dateEnd:'',//提交结束时间
            },
            this.date = []
            this.getList();
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 10px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
}
.tip_icon{
    font-size: 14px;
    margin-left: 2px;
    cursor: pointer;
}
.p_class p{
    margin-bottom: 5px;
}
.p_class p:last-child{
    margin-bottom: unset;
}
</style>
